<template>
    <div class="result">
        <span class="route_start">{{ uC }}</span>
        <img src="../../..//assets/source_material/右箭头.png" alt="" srcset="" class="plane-img" />
        <span class="route_start">{{ dC }}</span>
        <span class="route_date">{{ uD }}</span>
    </div>
    <div v-if="loading" class="loading">
        <img src="../../../assets/pkq1.gif" alt="" />
        <p>搜索中....</p>
    </div>
    <div class="head">
        <div class="head_a">
            <span style="margin-left: 70px;">
                航班信息
            </span>
        </div>
        <div class="head_b">
            <el-dropdown size="large" style="font-size: 16px;">
                <span class="el-dropdown-link">
                    {{ startText }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="timeSequence(1)">早 - 晚</el-dropdown-item>
                        <el-dropdown-item @click="timeSequence(2)">晚 - 早</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="head_b">
            <el-dropdown size="large" style="font-size: 16px;">
                <span class="el-dropdown-link">
                    {{ endText }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="timeSequence(3)">早 - 晚</el-dropdown-item>
                        <el-dropdown-item @click="timeSequence(4)">晚 - 早</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="head_c">
            <span style="margin-left: 120px;">
                航班状态
            </span>
        </div>
    </div>
    <div class="empty" v-if="!flightList.data.length">
        <div>
            <img src="..//..//..//assets/no-result.png" alt=""
                style="width: 200px;height: 200px;margin: auto;margin-left: 20px; margin-top: 30px;">
            <div style="margin: auto;margin-left: 10px;">
                未查询到航班，请修改条件重新查询
            </div>
        </div>
    </div>
    <div v-if="!loading">
        <div class="item" v-for="(item, index) in flightList.data" @click="into(index)" :key="index">
            <div class="item_a">
                <div class="item_a_a">
                    <div style="width: 10%;"></div>
                    <img :src="item.companyLogos">
                    <span class="item_a_a_a">
                        {{ item.company + item.flightNumber }}
                    </span>
                </div>
                <div class="item_a_b">
                    <div class="item_a_b_a">
                        <div class="item_a_b_a_a">{{ item.starTime.slice(0, 5) }}</div>
                        <div class="item_a_b_a_b">{{ item.upAirportName }}</div>
                    </div>
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="8" viewBox="0 0 140 8">
                            <path d="M0 3h130V0l10 8H0z" fill="rgb(83, 66, 66)" fill-rule="evenodd" />
                        </svg>
                    </span>
                    <div class="item_a_b_a">
                        <div class="item_a_b_a_a">{{ item.endTime.slice(0, 5) }}</div>
                        <div class="item_a_b_a_b">{{ item.downAirportName }}</div>
                    </div>
                </div>
                <div class="item_a_c">
                    <span class="item_a_c_span" :style="item.color">{{ item.state}}</span>
                    <div style="width: 30%;"></div>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 60px;"></div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from "vue"
import url from "../../../common/js/APIUtil";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

//路由
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

//浏览数据
var uC = ref(route.query.upCity);
var dC = ref(route.query.downCity);
var uD = ref(route.query.upDate);
const loading = ref(true);
var startText = ref('计划起飞')
var endText = ref('计划抵达')

//航班数据
var flightList = reactive({ data: [] })
const getData = () => {
    proxy.$http
        .get(
            url.API_GET_flight_city +
            route.query.upCity +
            "/" +
            route.query.downCity
        )
        .then((res) => {
            loading.value = true
            flightList.data = res.data.data
            if (flightList.data.length != 0) {
                loading.value = false
                flightList.data.sort((a, b) => {
                    return parseInt(a.starTime.slice(0, 2)) - parseInt(b.starTime.slice(0, 2))
                })
                for (let index = 0; index < flightList.data.length; index++) {
                    let stTime = new Date(uD.value + " " + flightList.data[index].starTime);
                    let edTime = new Date(uD.value + " " + flightList.data[index].endTime);
                    if (stTime > edTime) {
                        edTime = new Date(edTime.getTime() + 8.64e7)
                    }
                    flightList.data[index].stTime = stTime
                    flightList.data[index].edTime = edTime
                    let currentTime = new Date();
                    if (edTime < currentTime) {
                        flightList.data[index].color = { color: '#808080' }
                        flightList.data[index].state = "航班抵达"
                    } else if (stTime > currentTime) {
                        flightList.data[index].color = { color: 'rgb(57, 177, 57)' }
                        flightList.data[index].state = "航班计划"
                    } else {
                        flightList.data[index].color = { color: '#40E0D0' }
                        flightList.data[index].state = "航班起飞"
                    }
                }
                ElMessage.success(res.data.message)
            } else {
                loading.value = false
                ElMessage.warning('未查询到航班，请修改条件重新查询')
            }
        })
}

const into = (index) => {
    router.push({
        path: "/index/flightdynamic/content",
        query: {
            flightNumber: flightList.data[index].flightNumber,
            departureDate: uD.value
        }
    })
}

//排序
const timeSequence = (index) => {
    switch (index) {
        case 1:
            flightList.data.sort((a, b) => {
                endText.value = '计划抵达'
                startText.value = '计划起飞' + '早 - 晚'

                return a.stTime - b.stTime
            })
            break;
        case 2:
            flightList.data.sort((a, b) => {
                endText.value = '计划抵达'
                startText.value = '计划起飞' + '晚 - 早'
                return b.stTime - a.stTime
            })
            break;
        case 3:
            flightList.data.sort((a, b) => {
                startText.value = '计划起飞'
                endText.value = '计划抵达' + '早 - 晚'
                return a.edTime - b.edTime
            })
            break;
        case 4:
            flightList.data.sort((a, b) => {
                startText.value = '计划起飞'
                endText.value = '计划抵达' + '晚 - 早'
                return b.edTime - a.edTime
            })
            break;
    }

}

watch(route, (newValue, oldValue) => {
    if (route.path == '/index/flightdynamic/list') {
        uC.value = route.query.upCity;
        dC.value = route.query.downCity;
        uD.value = route.query.upDate;
        getData()
    }
}, { immediate: true })

</script>

<style scoped>
.route_start {
    font-size: 32px;
    margin: 0px 20px;
}

.route_date {
    font-size: 16px;
}

/*  */
.result {
    width: 1300px;
    border-radius: 10px;
    margin: 20px auto;
    margin-left: 200px;
    z-index: 100;
}

.plane-img {
    margin-top: 10px;
    width: 70px;
    height: 20px;
}

.head {
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 1100px;
    height: 65px;
    line-height: 65px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
}

.head_a {
    width: 25%;
}

.head_b {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 水平居中 */
    width: 22%;
    text-align: center;
}

.head_c {
    width: 25%;
}

.item {
    margin: 10px auto;
    width: 1100px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
}

.item:hover {
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.item_a {
    border-radius: 2px;
    width: 1100px;
    min-height: 90px;
    background-color: rgba(255, 255, 254, 0.4);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.item_a_a {
    display: flex;
    align-items: center;
    width: 30%;
}

.item_a_a_a {
    font-size: 18px;
}

.item_a_b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
}

.item_a_b_a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}

.item_a_b_a_a {
    font-size: 32px;
}

.item_a_b_a_b {
    font-size: 8px;
}

.item_a_c {
    justify-content: flex-end;
    display: flex;
    align-items: center;
    width: 30%;
}

.item_a_c_span {
    font-size: 24px;
}

.loading {
    position: absolute;
    left: 41%;
    width: 200px;
    z-index: 9999;
}

.loading p {
    padding-left: 50px;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.3);
}

.empty {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin: auto;
    width: 1100px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 10%);
}
</style>